<%@ page import="com.pixiv.Entity.User" %>
<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2021/11/24
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/pixiv/css/header.css">
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/common/layui/css/layui.css">
    <script src = "${pageContext.request.contextPath}/common/jquery3.6.0.js"></script>
    <script src = "${pageContext.request.contextPath}/common/layui/layui.js"></script>
</head>
<body>
<%
    User u = (User) session.getAttribute("GLOBAL_USER_OBJECT");
%>
<div id = "head_test_0">
    <div class="layui-main layui-container">
        <div class="layui-col-md4">
            <!--<img style = "float:left;border:1px solid black;" src = "" width = "39px" height = "39px">-->
            <i id = "pointToLeft" class="layui-icon">&#xe857;</i>
            <img id = "gotoPosition" src = "${pageContext.request.contextPath}/pixiv/img/pixiv.png"
                 width = "120px";height = "65px"  >
            <script type = "text/javascript">
                document.querySelector("#gotoPosition").onclick = function(){
                    location.href = "${pageContext.request.contextPath}/position/gotoPosition";
                }
            </script>

            <div style = "line-height:49px;float:left;"></div>

        </div>
        <div class="layui-col-md3">

        </div>
        <div class="layui-col-md5">

            <ul class="layui-nav" style = "background-color:ghostwhite;flex-wrap:wrap;">
                <li style = "position:relative;left:10px;top:0px;">
                    <input type = "button" value = "投稿" id = "upPictureToTarget"><!--按钮-->
                </li>
                <li class="layui-nav-item" style = "position:relative;left:165px;top:-47px;">
                    <img src="${pageContext.request.contextPath}/user/getUserIcon" id = "UserIconDisplay" class="layui-nav-img">
                    <dl class="layui-nav-child" style = "width:150px;margin-left:-40px;margin-top:-16px;">

                        <img src = "${pageContext.request.contextPath}/user/getUserIcon"
                             style = "width:75px;height:75px;border-radius:35px;border:0px;">
                        <dd style = "color:rgba(20,20,20,0.7);">账号id:<%out.write(String.valueOf(u.getUserID()));%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">用户姓名:<%out.write(u.getName() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">e-mail:<%out.write(u.getEMail() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoSetUser">设置</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoMyTitle">查看我的图库</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/Login/gotoLogin">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <script type = "text/javascript">
        //投稿按钮
        document.querySelector("#upPictureToTarget").onclick = function(){
            location.href = "${pageContext.request.contextPath}/user/gotoUpload";
        }
        //跳转个人界面
        document.querySelector("#UserIconDisplay").onclick = function(){
            location.href = "${pageContext.request.contextPath}/user/gotoSetUser";
        }
        //显示公告
        document.querySelector("#pointToLeft").onclick = function(){
            var left = document.querySelector("#left_topInformation");
            left.style.display = "block";
        }
    </script>

</div>

<div id = "head_test_1">

    <div class = "layui-main layui-container" style = "width:1200px;height:300px;background-color:rgba(0,0,0,0.01)">
        <div style = "width:1200px;height:150px;overflow:hidden;" id = "coverShow">
            <img src = "${pageContext.request.contextPath}/covershow/showCoverShow">
        </div>

        <img id = "userIconBig"
             style = "margin-top:0px;margin-left:0px;border-radius:100px;width:200px;height:200px;float:left;transform:translate(0px,-15px);">

        <div style = "margin-top:0px;float:left;width:899px;height:100px;border-top:1px solid darkcyan;" >
            <p style = "margin-top:20px;margin-left:20px;" id = "userID"></p>
            <p style = "margin-top:0px;margin-left:20px;" id = "userName"></p>
            <p style = "margin-top:0px;margin-left:20px;" id = "userEamil"></p>
            <a style = "margin-top:15px;margin-left:20px;" href = "${pageContext.request.contextPath}/position/gotoSetUser">查看个人资料</a>
        </div>

    </div>
    <style type = "text/css">
        #head_test_1{
            width:100%;
            height:300px;
            position:absolute;
            left:0px;
            top:80px;
        }

        #coverShow:hover{
            background-color:rgba(0,0,0,0.05);
        }
    </style>

    <script type = "text/javascript">
        $.ajax({
            url:"${pageContext.request.contextPath}/covershow/changeCoverShow",
            dataType:"json",
            type:"post",
            success:function(req){
                var posx = req.posX;
                var posy = req.posY;

                var img = document.querySelector("#coverShow>img");
                img.setAttribute("style","width:1200px;transform:translate(" + posx + "px," + posy + "px);");


            }
        });
    </script>

</div>

<div id = "head_test_2">

    <div class = "layui-main layui-container" style = "width:1200px;height:799px;background-color:rgba(0,0,0,0.01)">
        <ul style = "flex-wrap:wrap;">
            <li style = "float:left;"><a href = "">主页 <label id = "myTitleTotal"></label> </a></li>
            <li style = "float:left;"><a href = "">最新</a></li>
        </ul>

        <div style = "margin-top:10px;margin-bottom:5px;"><h2>精选</h2></div>
        <div style = "width:1100px;height:798px;" id = "titleList">
        </div>

        <div id = "advertising" style = "margin-left:100px;width:1000px;height:150px;overflow:hidden;">
            <img src = "${pageContext.request.contextPath}/advertis/get" style = "">
        </div>
    </div>



    <style type = "text/css">
        #head_test_2{
            width:100%;
            height:800px;
            position:absolute;
            left:0px;
            top:400px;
        }
        #head_test_2>div:nth-child(1)>ul:nth-child(1){
            list-style-type:none;
            display:flex;
            flex-wrap:wrap;
            margin-top:30px;
            text-align:center;
            width:100%;
            height:26px;

        }
        #head_test_2>div:nth-child(1)>ul:nth-child(1)>li{
            float:left;
            width:125px;
            height:25px;
            margin-left:10px;
            margin-right:10px;
            line-height:25px;
        }
        #head_test_2>div:nth-child(1)>ul:nth-child(1)>li:nth-child(1){
            border-bottom:5px solid darkslateblue;
        }

        #head_test_2>div:nth-child(1)>div:nth-child(3)>img{
            float:left;
            width:200px;
            height:200px;
            margin-left:10px;
            margin-right:10px;
            margin-top:10px;
            margin-bottom:10px;
            cursor:pointer;
        }

    </style>

    <script type = "text/javascript">

        var div = document.querySelector("#head_test_2>div:nth-child(1)>div:nth-child(3)");
        var lst = div.childNodes;

        for(var i = 0;i<lst.length;i++)
        {
            var img = lst[i];
            img.onclick = function(){
                var uuid = this.getAttribute("uuid");
                $.ajax({
                    url:"${pageContext.request.contextPath}/position/initOpenTitle",
                    data:{UUID:uuid},
                    dataType:"json",
                    type:"post",
                    success:function(req) {
                        if (req.flag == 1)
                            location.href = "${pageContext.request.contextPath}/position/switchTitle";
                    }
                });

            }


            //console.log(img);
        }



    </script>

</div>


<script type = "text/javascript">
    $.ajax({
        url:"${pageContext.request.contextPath}/position/loadUserInformation",
        dataType:"json",
        type:"post",
        success:function(req){
            if (req.flag == 1)
            {
                loadUserInformation(req);
                var lst = document.querySelector("#titleList");

                var picLst = req.titles;
                for (var i = 0;i<picLst.length;i++)
                {

                    var uuid = picLst[i].titleUUID;
                    if (uuid != "-1")
                    {

                        var div = document.createElement("div");

                        var path = "${pageContext.request.contextPath}/title/getTitleFristP?id=" + uuid;
                        var img = document.createElement("img");
                        img.setAttribute("src",path);
                        img.setAttribute("saveuid",uuid);
                        img.setAttribute("style","height:250px;float:left;");

                        var lab = document.createElement("label");
                        lab.append(picLst[i].titleCaption);
                        lab.setAttribute("style",
                            "position:relative;left:3px;top:-16px;" +
                            "background-color:rgba(0,0,0,0.5);color:rgba(255,255,255,0.9);");

                        div.setAttribute("style","width:250px;height:250px;overflow:hidden;float:left;margin:5px;cursor:pointer;");
                        div.appendChild(img);
                        div.appendChild(lab);
                        lst.appendChild(div);

                        img.onclick = function(){
                            var uuid = this.getAttribute("saveuid");
                            $.ajax({
                                url:"${pageContext.request.contextPath}/position/initOpenTitle",
                                data:{UUID:uuid},
                                dataType:"json",
                                type:"post",
                                success:function(req) {
                                    if (req.flag == 1)
                                        location.href = "${pageContext.request.contextPath}/position/switchTitle";
                                }
                            });
                        }
                    }


                }


                //console.log(picLst);


            }
        }
    })


    function loadUserInformation(req)
    {
        var userID = document.querySelector("#userID");
        userID.append(req.selectUserID);

        var userIcon = document.querySelector("#userIconBig");
        userIcon.setAttribute("src","${pageContext.request.contextPath}/user/getUserIconByID?id=" + req.selectUserID);

        var userName = document.querySelector("#userName");
        userName.append(req.name);

        var userName = document.querySelector("#userEamil");
        userName.append(req.email);

        var myTitleTotal = document.querySelector("#myTitleTotal");
        myTitleTotal.append(req.total);


    }
</script>

</body>
</html>
